<template>
  <div class="column">
    <div class="boxTitle">
      残疾类别统计分析
    </div>
   <div id="myChart" style="width:100%;height:100%;display:block;"></div>
  </div>
</template>

<script>
export default {
  name: 'canjileibie',
  data () {
    return {
      // 
    }
  },
  mounted(){
    this.drawLine();
  },
  methods:{
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))

        var option = {
            tooltip: {
                trigger: 'item',
                borderColor: 'rgba(255,255,255,.3)',
                backgroundColor: 'rgba(13,5,30,.6)',
                borderWidth: 1,
                padding: 5,
                color:'#fff',
                formatter: function(parms) {
                    var str ="残疾类别</br>" +
                        parms.data.name + parms.data.value + "人</br>" +
                        "占比：" + parms.percent + "%";
                    return str;
                }
            },
              grid:{
                        left:'-200',
                       
                      
                    },
            
            series: [
                {
                    name: '残疾类别',
                    type: 'pie',
                     radius: [50, 100],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    avoidLabelOverlap: false,
                    roseType: 'area',
                   
                   label: {
                        show: true,
                        position: 'outside',
                        formatter: '{b}\n\n{d}%',
                        rich: {
                            hr: {
                                backgroundColor: 't',
                                borderRadius: 3,
                                width: 3,
                                height: 3,
                                padding: [3, 3, 0, -12]
                            },
                            a: {
                                padding: [0, 0, 0, 0]
                            },
                            b: {
                              color:"#fff"
                            }
                        }
                    },
                   
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '18',
                            color:'#fff'
                        }
                    },
                    labelLine: {
                      normal: {
                      length: 10,
                      length2: 15
                      }
                    },
                    data: [
                        {value: 1048, name: '视力残疾'},
                        {value: 735, name: '精神残疾'},
                        {value: 580, name: '多重残疾'},
                        {value: 484, name: '听力残疾'},
                        {value: 300, name: '言语残疾'},
                        {value: 200, name: '智力残疾'},
                        {value: 100, name: '肢体残疾'}
                    ]
                }
            ]
        };

        // 绘制图表
        myChart.setOption(option);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  div{
  
  }

</style>
